<template>
  <div class="page-container">
      <!-- 页头 -->
      <!-- <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >下发协查</span
        >
      </div> -->
      <!-- 主题 -->
      <div class="right-container">
        <!-- 事件基本想信息 -->
        <div class="box-top">
          <div class="box-top-title">事件基本信息</div>
          <!-- 事件信息内容 -->
          <div class="box-top-content">
            <!-- 第一行 -->
            <div style="display: flex">
              <div style="width: 25%; display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  事件名称：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  防护墙策略变化事件
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  级别：
                </div>
                <div style="font-size: 14px; color: #4b6eef; width: 250px">
                  一般
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  类别：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  用户行为异常
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  处置信息：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  用户行为异常
                </div>
              </div>
            </div>
            <!-- 第二行 -->
            <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
              <div style="width: 25%; display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  发生时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  2022.03.20 12：08:23
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    word-break: break-all;
                    flex-shrink: 0;
                  "
                >
                  处置状态：
                </div>
                <div class="box-img">
                  <img
                    src="@/assets/images/state-fail@2x.png"
                    alt="example"
                    style="width: 14px; height: 14px; margin-right: 5px"
                  />
                  <span style="font-size: 14px; color: #333435; width: 250px"
                    >未处置</span
                  >
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  处置时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  2022.03.20 14:28:46
                </div>
              </div>
           
            </div>
            <!-- 第三行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  事件详情：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  发现终端76.14.91.98，对防火墙策略”进行了修改
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 协查信息 -->
        <div class="box-top">
          <div class="box-top-title">协查信息</div>
          <!-- 协查信息内容 -->
          <div class="box-top-content">
            <!-- 第一行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  标题：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                 针对“防火墙策略变化事件”的协查申请
                </div>
              </div>
            </div>
            <!-- 第二行 -->
            <div style="display: flex">
              <!-- 左 -->
              <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
                <div style="font-size: 14px; color: #606266; width: 100px;flex-shrink: 0;">
                  申请单位名称：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px;">
                  新疆维吾尔自治区检察院自监管平台
                </div>
              </div>
              <!-- 右 -->
               <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
                <div style="font-size: 14px; color: #606266; width: 100px;flex-shrink: 0;margin-left:42px">
                  协办单位名称：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  新疆维吾尔自治区检察院自监管平台
                </div>
              </div>
            </div>
                <!-- 第三行 -->
            <div style="display: flex">
              <!-- 左 -->
              <div style="display: flex; margin-bottom: 20px;">
                <div style="font-size: 14px; color: #606266; width: 100px;flex-shrink: 0;">
                  申请时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px;">
                  2022.03.25 12:00:00
                </div>
              </div>
              <!-- 右 -->
               <div style="display: flex;  margin-bottom: 20px;">
                <div style="font-size: 14px; color: #606266; width: 100px;flex-shrink: 0;margin-left:42px">
                  期望完成时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  2022.03.25 12:00:00
                </div>
              </div>
            </div>
            <!-- 第四行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  协查说明：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                 针对“防火墙策略变化事件”需要贵单位（新疆维吾尔自治区检察院自检管平台）进行协助调查。
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 进度 -->
   
      </div>
   
   
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button @click="$router.go(-1)">拒 绝</el-button>
      <el-button type="primary" @click="$router.go(-1)">下 发</el-button>
   
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      tableData: [
        {
          event_category: ["运维异常"],
          event_level: ["一般"],
          startTime: "2022-07-26 16:28:22",
          description:
            "发现运维人员工单处置不规范-运维人员在工作时同执行可能影响正常业务的运维操作，系统名称：泓科主机监控与南计系统，访问地址上：http://192.168.1.217/2",
        },
      ],
    };                                                             
  },
};
</script>

<style scoped lang="scss">
.preset-log {
  height: 100%;
  background: #eef0f5;
  padding: 0px;
  .page-container {
    background: #fff;
    display: flex;
    height: 100%;
    .right-container {
      padding: 20px;
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .targetTable {
        flex: 1;
      }
    }
  }}
.dialog-footer {
  // margin-top: 250px;
  margin-bottom: 0px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.back {
  margin-bottom: 20px;
}

// background-color: #ffffff;
//   height: 1000px;

.box-top {
  // height: 200px;
  background: #ffffff;
  border-radius: 4px;
  padding-left: 20px;
  padding-bottom: 30px;
  margin-bottom: 20px;
  .box-top-title {
    height: 62px;
    line-height: 62px;
    // text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .box-img {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: left; /* 水平居中对齐 */
    // margin-left:60px
    // flex-shrink: 0;
  }
  .box-top-content {
    margin-bottom: 20px;
  }
  .time-img {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    // margin-left: -5px;
    
  }
  .time-box {
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    height: 78px;
    line-height: 25px;
    background-color: #f5f7fe;
    border-left: 3px #4b6eef solid;
    padding: 0 18px;
    margin-top: 10px;
    word-wrap: break-word;
    font-size: 14px;
    color: #333435;
    margin-left: 5px;
  }
}
</style>
